<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="robots" content="noindex, follow"/>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"/>
    <link rel="stylesheet" href="css/plugins.min.css">
    <link rel="stylesheet" href="css/vendor.min.css">
    <link rel="stylesheet" href="css/style.min.css">
    <script src="js/jquery/jquery.min.js"></script>
</head>

<style>
    .Image-size {
        width: 120px;
        height: 40px;
        background: gainsboro;
    }
    .login-form .inputError{
        border-color: red;
    }
    .btn-secondary{
        background-color:#006fb7 ;
        border-color: #006fb7;
    }
    html{
        height: 100%;
        overflow-y: hidden;
    }
    body{
        height: 100%;
        overflow-y: auto;
    }
</style>
<body>

<div class="main-wrapper">
    <header class="main-header_area position-relative">
        <main class="main-content">
            <div class="login-register-area section-space-y-axis-100">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-6">
                            <div>
                                <div class="login-form">
                                    <h4 class="login-title">|登录</h4>
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <label>电子邮件地址*</label>
                                            <input type="email" id="login-emila_address" class="verify-NoEmpty"
                                                   placeholder="电子邮件地址">
                                        </div>
                                        <div class="col-lg-12">
                                            <label>密码</label>
                                            <input type="password" id="login-password" class="verify-NoEmpty"
                                                   placeholder="密码">
                                        </div>
                                        <div class="col-md-6">
                                            <label>验证码</label>
                                            <div class="Image-size"><img src="" id="dengluCode">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <label>输入验证码</label>
                                            <input type="text" id="login-captcha" class="verify-NoEmpty"
                                                   placeholder="输入验证码">
                                        </div>

                                        <div class="col-md-8" style="margin-top: 10px;">
                                            <div class="check-box">
                                                <input type="checkbox" id="remeber_me">
                                                <label for="remeber_me">记住我</label>
                                            </div>
                                        </div>
                                        <div class="col-md-4 pt-1 mt-md-0">
                                            <div class="forgotton-password_info">
                                                <a href="#">忘记密码?</a>
                                            </div>
                                        </div>
                                        <div class="col-lg-12 pt-5">
                                            <button class="btn btn-custom-size lg-size btn-secondary btn-primary-hover rounded-0"
                                                    onclick="login()">登录
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 pt-10 pt-lg-0">
                            <div >
                                <div class="login-form">
                                    <h4 class="login-title">|注册</h4>
                                    <div class="row">
                                        <div class="col-md-6 col-12">
                                            <label>姓</label>
                                            <input type="text" id="last-name" class="verify-NoEmpty" placeholder="姓">
                                        </div>
                                        <div class="col-md-6 col-12">
                                            <label>名字</label>
                                            <input type="text" id="first-name" class="verify-NoEmpty" placeholder="名字">
                                        </div>
                                        <div class="col-md-12">
                                            <label>电子邮件地址*</label>
                                            <input type="email" id="enroll-emila_address" class="verify-NoEmpty"
                                                   placeholder="电子邮件地址">
                                        </div>
    <!--                                    <div class="col-md-6">-->
    <!--                                        <label>密码</label>-->
    <!--                                        <input type="password" id="enroll-password" class="verify-NoEmpty"-->
    <!--                                               placeholder="密码">-->
    <!--                                    </div>-->
    <!--                                    <div class="col-md-6">-->
    <!--                                        <label>确认密码</label>-->
    <!--                                        <input type="password" id="enroll-password2" class="verify-NoEmpty"-->
    <!--                                               placeholder="确认密码">-->
    <!--                                    </div>-->
                                        <div class="col-md-6">
                                            <label>验证码</label>
                                            <div class="Image-size"><img src="" id="zhuceCode">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <label>输入验证码</label>
                                            <input type="text" id="enroll-capicha" class="verify-NoEmpty"
                                                   placeholder="输入验证码">
                                        </div>
                                        <div class="col-12" style="margin-top: 60px;">
                                            <button class="btn btn-custom-size lg-size btn-secondary btn-primary-hover rounded-0"
                                                    onclick="enroll()">注册
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <a class="scroll-to-top" href="">
            <i class="fa fa-chevron-up"></i>
        </a>
    </header>
</div>
<div class="footer-area">
    <div class="footer-bottom py-3" data-bg-color="#1EB9EE" style="background-color: rgb(30, 185, 238);">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="copyright">
                        <span class="copyright-text text-white">Copyright © 2023.LAO Asia Unicom All rights reserved.</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="layui/layui.js"></script>
<script src="js/config.js"></script>
<script src="js/token.js"></script>
<script src="js/getcart.js"></script>
<script src="js/vendor.min.js"></script>
<script src="js/plugins.min.js"></script>
<script src="js/jquery.i18n.min.js"></script>
<script src="js/multi_lang_config.js"></script>
</body>
<script>

    var layer = layui.layer;
    var form = layui.form;

    var moduleName = "shop";
    var defaultLang = layui.data('langTab').langType;
    initLangConfig({
        defaultLang:defaultLang,
        filePath: "js/i18n/"+moduleName+"/",
        module:moduleName,
        base:"js/"
    })
    var i18np = null;
    function changeLang(lang) {
        defaultLang = lang;
        reloadI18n({
            defaultLang:lang,
            filePath: "js/i18n/"+moduleName+"/",
            module:moduleName,
        })
        i18np.loadProperties(moduleName);
    }

    layui.config({base: 'js/'})
        // 继承treetable.js插件
        .extend({i18np: 'i18n'}).use([ 'i18np','jquery'], function () {
        i18np = layui.i18np;
        i18np.loadProperties(moduleName);
    });

    //注册
    function enroll() {
        var enroll_emila=document.getElementById('enroll-emila_address').value;
        var enroll_captcha=document.getElementById('enroll-capicha').value;
        if (enroll_emila==""||enroll_emila==null){
            $("#enroll-emila_address").addClass('inputError');
            return;
        }else if (enroll_captcha==""||enroll_captcha==""){
            $("#enroll-emila_address").removeClass('inputError');
            $("#enroll-capicha").addClass('inputError');
            return;
        }
        $("#enroll-capicha").removeClass('inputError');
        $.ajax({
            url:HOST+"webapi/userInfo/add",
            type:"post",
            data:{"email":enroll_emila,"code":enroll_captcha},
            success:function (res) {
                if(res.code==200){
                    layer.msg("注册成功，请设置密码", {time: 1000}); return;
                    // location.replace("storemain.html");
                    setTimeout(function(){
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);//关闭弹出层
                        parent.location.reload();//重新加载父页面
                    },1500);
                }
            }
        })
    }

    //登录
    function login() {
        var login_emila = document.getElementById('login-emila_address').value;
        var login_password = document.getElementById('login-password').value;
        var login_captcha = document.getElementById('login-captcha').value;
        if (login_emila == "" || login_emila == null) {
            $("#login-emila_address").addClass('inputError');
            return;
        } else if (login_captcha == "" || login_captcha == null) {
             $("#login-captcha").addClass('inputError');
            return;
        } else if (login_password == "" || login_password == null) {
            $("#login-password").addClass('inputError');
            return;
        }
        $("#login-emila_address,#login-captcha,#login-password").removeClass('inputError');
        $.ajax({
            url:HOST+"webapi/userInfo/login",
            type:"post",
            data:{"email":login_emila,"password":login_password,"code":login_captcha},
            success:function (res) {
                if(res.code==200){
                    var token = res.data.token;
                    localStorage.setItem("token",token);
                    // location.replace("storemain.html");
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);//关闭弹出层
                    parent.location.reload();//重新加载父页面
                }
            }
        })
    }
    // 获取验证码
    $(function () {
        $("#dengluCode").attr("src",HOST+"webapi/tool/captcha?type=denglu&r="+Math.random());
        $("#zhuceCode").attr("src",HOST+"webapi/tool/captcha?type=zhuce&r="+Math.random());
    })

    // $('.verify-NoEmpty').click(function () {
    //     $(this).css("border", "1px solid black");
    // })
    // $('.verify-NoEmpty').blur(function () {
    //     if ($(this).val() == "") {
    //         $(this).css("border", "1px solid red");
    //     } else {
    //         $(this).css("border", "1px solid #dee2e6");
    //     }
    // })
    // $(function () {
    //     $.ajax({
    //         // url:"http://127.0.0.1:8082/webapi/banners/getBanners?fenlei=1",
    //         url:"http://127.0.0.1:8082/webapi/fufei/getFufei?type=2",
    //         headers:{"lang":"en","token":"221rqrr2rqer2"},
    //         success:function (res) {
    //             console.log(res)
    //         }
    //     })
    // })
</script>
</html>